<template>
	<view class="content">
		<!-- 
		雀欢乐
		<view>
			<image src="/static/index_top_bg.png" style="width: 100%;" mode="aspectFit"></image>
		</view> 
		-->
		<!-- <view class="background">
			<image src="/static/login_bg_phone.png" style="width: 100%;height: 100%;"></image>
		</view> -->
		<view>
			<image src="/static/index/index_top_bg.jpg" style="width: 100%;height:418rpx;" mode="aspectFit"></image>
		</view> 
		<view class="loginText">
			<view class="loginTextInput">
				<view class="">
					<text style="color: #00aaff;font-weight: 600;font-size: 32rpx;letter-spacing: 5rpx;">会员名:</text>
					<input type="text" v-model="name" style="font-size: 30rpx;margin-top: 20rpx;border-bottom-style: solid;border-bottom-width: 1rpx;border-bottom-color:#00aaff ;" placeholder="" value="" />
				</view>
				<view class="" style="margin-top: 30rpx;">
					<text style="color: #00aaff;font-weight: 600;font-size: 32rpx;letter-spacing: 12rpx;">密 码:</text>
					<input type="password" v-model="certNo" style="font-size: 30rpx;margin-top: 20rpx;border-bottom-style: solid;border-bottom-width: 1rpx;border-bottom-color:#00aaff ;" placeholder="" value="" />
				</view>
			</view>
		</view>
		<!-- <view style="margin-left: 20rpx;">
			<checkbox-group @change="selfChange">
				<label>
					<checkbox :checked="selfChecked"/><text style="color: #007AFF;" @click="openXieyi">用户服务协议及隐私条款</text>
				</label>
			</checkbox-group>
		</view> -->
		<view class="afrim" @click="authmember">立即登录</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import Api from '@/common/api';
	import store from '@/store/index';
	export default {
		data() {
			return {
				name: '',
				certNo: '',
				logining: false,
				selfChecked: false,
				openId:'',
				code:'',
				adminmember:{}
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(options) {
			this.openId = options.openId;
			this.code = options.code;
		},
		methods: {
			...mapMutations(['login']),
			selfChange(){
				console.log("old=" + this.selfChecked);
				this.selfChecked = !this.selfChecked;
				console.log("new=" + this.selfChecked);
			},
			openXieyi(){
				uni.navigateTo({
					url:'/pages/index/xieyi'
				})
			},
			async authmember(){
				let params = {
					code: this.code
				}
				let data = await Api.apiCall('get', Api.member.weixinLogin, params);
				console.log(data.userInfo)
				if (data.userInfo) {
					this.adminmember = data.userInfo;
					this.submit();
				}
			},
			async submit(res) { 
				var that = this;
				if (!that.name) {
					that.$core.msg('请输入会员名');
					return;
				}
				if (!that.certNo) {
					that.$core.msg('请输入密码');
					return;
				}
				let params ={
						username:that.name,
						password:that.certNo,
						adminmemberId:that.adminmember.id
				}
				let data = await Api.apiCall('get', Api.user.userLogin, params);
				if(data){
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '绑定成功,请退出到公众号首页点击门店中心进入商户中心',
						success: function (res) {
							if (res.confirm) {
							}
						}
					});
				}
			},
			async toLogin() {
				const that = this
				if (that.name == "") {
					that.$core.msg('会员名不能为空.')
				} else if (that.certNo == "") {
					that.$core.msg('密码不能为空.')
				} 
				else {
					that.logining = true;
					//#ifdef APP-PLUS || H5
					uni.request({
						url: Api.BASEURI + Api.common.loginByAppTeacher,
						data: {
							"userName": that.name,
							"password": that.certNo
						},
						dataType: 'JSON',
						method: 'GET',
						success: (res) => {
							console.log(res);
							if (res.statusCode == 200) {
								let resultJson = res.data
								that.login(resultJson.data);
								uni.setStorageSync('role','1');
								uni.redirectTo({
									url: `/pages/index/bindStudent`
								})
							} else {
								that.$core.msg('身份验证失败');
							}
						},
						fail: function(e) {
							console.log("登录失败.");
						}
					});
					//#endif
				}
			}
		}
	};
</script>

<style>
	.afrim{
		width: 650rpx;
		height: 80rpx;
		background: #0DA944;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		position: fixed;
		bottom: calc(100% - 95%);
		margin-left: 40rpx;
	}
	.loginBtn {
		margin-top: 150rpx;
		width: 750rpx;
		height: 80rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.loginBtn button {
		color: #ffffff;
		font-size: 30rpx;
		background: #5684e4;
		line-height: 80rpx;
	}

	uni-button:after {
		border: none;
	}

	.loginName {
		flex: 1;
		border-bottom: 1px solid #efeef4;
		box-sizing: border-box;
	}

	.loginName input {
		display: inline-block;
		vertical-align: middle;
		padding: 0 30rpx;
		width: 478rpx;
		height: 89rpx;
		font-size: 28rpx;
		line-height: 89rpx;
	}

	.loginName text {
		display: inline-block;
		vertical-align: middle;
		padding: 0 30rpx;
		width: 112rpx;
		font-size: 28rpx;
		line-height: 89rpx;
	}

	.loginPassword {
		flex: 1;
	}

	.loginPassword input {
		display: inline-block;
		vertical-align: middle;
		padding: 0 30rpx;
		width: 478rpx;
		height: 89rpx;
		font-size: 28rpx;
		line-height: 89rpx;
	}

	.loginPassword text {
		display: inline-block;
		vertical-align: middle;
		padding: 0 30rpx;
		width: 112rpx;
		font-size: 28rpx;
		line-height: 89rpx;
	}

	.loginTextInput {
		background: #ffffff;
		width: 710rpx;
		height: 340rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}

	.loginText {
		width: 750rpx;
		height: 260rpx;
		/*友智*/
		/* padding: 400rpx 20rpx; */
		/* padding: 20rpx 20rpx; */
		box-sizing: border-box;
	}

	.content {
		/* background: #efeef4; */
		height: 100vh;
		/* 		width:100vw; */
	}
	
/* 	.background{
		width: 100%;
		height: 100vh;
		z-index: -1;
		position: absolute;
	} */

	.text-area {
		color: #ffffff;
		width: 750rpx;
		height: 350rpx;
		background: #5684e4;
		text-align: center;
		font-size: 70rpx;
		line-height: 350rpx;
		letter-spacing: 20rpx;
	}
	
	.imagetop{
			height: 100%;
			width: 100%;
	}
	
</style>
